<template>
  <div class="home-container">
    <el-container style="height: 100%;">
      <!-- 左侧导航 -->
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        router
      >
        <!-- 折叠标志 -->
        <div class="collapse-contaier">
          <div v-if="!isCollapse" class="logo-contaier">导航</div>
          <div class="collapse-icon">
            <i v-if="isCollapse" @click="()=>isCollapse = !isCollapse" class="el-icon-s-unfold"></i>
            <i v-else @click="()=>isCollapse = !isCollapse" class="el-icon-s-fold"></i>
          </div>
        </div>

        <el-submenu index="/about">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">导航1</span>
          </template>
          <el-menu-item index="/about/aboutdemo1">1.1</el-menu-item>
          <el-menu-item index="/about/aboutdemo2">1.2</el-menu-item>
        </el-submenu>
        <el-menu-item index="/demo1">
          <i class="el-icon-menu"></i>
          <span slot="title">demo1</span>
        </el-menu-item>
        <el-menu-item index="/demo2">
          <i class="el-icon-document"></i>
          <span slot="title">demo2</span>
        </el-menu-item>
        <el-menu-item index="/demo3">
          <i class="el-icon-setting"></i>
          <span slot="title">demo3</span>
        </el-menu-item>
      </el-menu>

      <!-- 右侧 -->
      <el-container>
        <!-- 头部 -->
        <el-header class="header">Header</el-header>

        <!-- 内容 -->
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      isCollapse: false,
      collapseWidth: "200px"
    };
  },
  methods: {
    handleOpen() {},
    handleClose() {}
  }
};
</script>

<style lang="scss" scoped>
.home-container {
  width: 100%;
  height: 100%;
}
.collapse-contaier {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .logo-contaier {
    margin-left: 35px;
    white-space: nowrap;
  }
  .collapse-icon {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.aside-200 {
  width: 200px;
}
.aside-50 {
  width: 50px;
}
.header {
  border: 1px solid #4dad44;
}
.main {
  border: 1px solid #295e92;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
